﻿@page "/components/popup"
<LayoutContent AnchorItems="@(new[]{"基本弹出层","位置方向","触发方式","API"})">
<PageHeader Title="Popup 弹出层">
    弹出层组件是其他弹窗类组件如气泡确认框实现的基础，当这些组件提供的能力不能满足定制需求时，可以在弹出层组件基础上封装。
</PageHeader>

<Example Title="基本弹出层">
    <Description>由是让浮层内容和触发元素组成，两者均可自定义。设置 <code>Content</code> 自定义浮层内容。</Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TPopup Content="弹出层的内容">
                    <TButton Disabled>按钮</TButton>
                </TPopup>
            </TSpaceItem>
            <TSpaceItem>
                <TPopup Content="弹出层的内容" Trigger="PopupTrigger.Click">
                    <TButton>点击</TButton>
                </TPopup>
            </TSpaceItem>
            <TSpaceItem>
                <TPopup Content="弹出层的内容" Trigger="PopupTrigger.Hover">
                    <TButton>悬浮鼠标</TButton>
                </TPopup>
            </TSpaceItem>
            <TSpaceItem>
                <TPopup Content="弹出层的内容" Trigger="PopupTrigger.Hover" Arrow>
                    <TButton>带箭头</TButton>
                </TPopup>
                    </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TPopup Content=""弹出层的内容"">
    <TButton Disabled>按钮</TButton>
</TPopup>

<TPopup Content=""弹出层的内容"" Trigger=""PopupTrigger.Click"">
    <TButton>点击</TButton>
</TPopup>

<TPopup Content=""弹出层的内容"" Trigger=""PopupTrigger.Hover"">
    <TButton>悬浮鼠标</TButton>
</TPopup>

<TPopup Content=""弹出层的内容"" Trigger=""PopupTrigger.Hover"" Arrow>
    <TButton>悬浮鼠标</TButton>
</TPopup>
```
")
    </CodeContent>
</Example>
<Example Title="位置方向">
    <Description>
        设置 <code>Placement</code> 显示不同的位置。
    </Description>
    <RunContent>
        <TSpace Vertical>
            <TSpaceItem>
                <TSpace>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.TopStart">
                            <TButton>上左</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.Top">
                            <TButton>上</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.TopEnd">
                            <TButton>上右</TButton>
                        </TPopup>
                    </TSpaceItem>
                </TSpace>
            </TSpaceItem>
            <TSpaceItem>
                <TSpace Vertical>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.LeftStart">
                            <TButton>左上</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.Left">
                            <TButton>左</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.LeftEnd">
                            <TButton>左下</TButton>
                        </TPopup>
                    </TSpaceItem>
                </TSpace>
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                <TSpace Vertical AdditionalStyle="text-align:right">
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.RightStart">
                            <TButton>右上</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.Right">
                            <TButton>右</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.RightEnd">
                            <TButton>右下</TButton>
                        </TPopup>
                    </TSpaceItem>
                </TSpace>
            </TSpaceItem>
            <TSpaceItem>
                <TSpace>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.BottomStart">
                            <TButton>下左</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.Bottom">
                            <TButton>下</TButton>
                        </TPopup>
                    </TSpaceItem>
                    <TSpaceItem>
                        <TPopup Content="弹出层的内容" Arrow Placement="PopupPlacement.BottomEnd">
                            <TButton>下右</TButton>
                        </TPopup>
                    </TSpaceItem>
                </TSpace>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.TopStart"">
        ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.Top"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.TopEnd"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.LeftStart"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.Left"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.LeftEnd"">
    ...
</TPopup>


<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.RightStart"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.Right"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.RightEnd"">
    ...
</TPopup>


<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.BottomStart"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.Bottom"">
    ...
</TPopup>

<TPopup Content=""弹出层的内容"" Arrow Placement=""PopupPlacement.BottomEnd"">
    ...
</TPopup>
```
")
    </CodeContent>
</Example>
<Example Title="触发方式">
    <Description>
        设置 <code>Trigger</code> 使用不同的方式触发。默认是 <code>Hover</code> 。
    </Description>
    <RunContent>
        <TSpace>
            <TSpaceItem>
                <TPopup Content="弹出层的内容" Trigger="PopupTrigger.Click">
                    <TButton>点击</TButton>
                </TPopup>
            </TSpaceItem>
            <TSpaceItem>
                <TPopup Content="弹出层的内容" Trigger="PopupTrigger.Hover">
                    <TButton>悬浮鼠标</TButton>
                </TPopup>
            </TSpaceItem>
            <TSpaceItem>
                <TPopup Content="弹出层的内容" Trigger="PopupTrigger.Focus">
                    <TInputText @bind-Value="Text" />
                </TPopup>      
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TPopup Content=""弹出层的内容"" Trigger=""PopupTrigger.Click"">
    <TButton>点击</TButton>
</TPopup>
  
<TPopup Content=""弹出层的内容"" Trigger=""PopupTrigger.Hover"">
    <TButton>悬浮鼠标</TButton>
</TPopup>

<TPopup Content=""弹出层的内容"" Trigger=""PopupTrigger.Focus"">
    <TInputText @bind-Value=""Text"" />
</TPopup>
```
")
    </CodeContent>
</Example>
@code{
    string Text{ get; set; }
}

<Example Title="自定义弹出内容">
    <Description></Description>
    <RunContent>
        <TPopup>
            <PopupContent>
                <h2>这里是标题</h2>
                <p>这里是内容</p>
            </PopupContent>
            <ChildContent>
                <TButton>悬浮显示</TButton>
            </ChildContent>
        </TPopup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TPopup>
    <PopupContent>
        <h2>这里是标题</h2>
        <p>这里是内容</p>
    </PopupContent>
    <ChildContent>
        <TButton>悬浮显示</TButton>
    </ChildContent>
</TPopup>
```
")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TPopup)"></ComponentAPI></LayoutContent>